<template>
  <keep-alive>
    <div class="app-container" >
      <iframe ref="myIframe"
              :src="iframeUrl"
              style="width:100%;height:100%;"
              frameborder="no"
              border="0"
              scrolling="no"
              allowtransparency></iframe>
    </div>
  </keep-alive>

</template>

<script setup name="ChartItem">
import elementResizeDetectorMaker from "element-resize-detector";
import { Base64 } from "js-base64";
import {getCurrentInstance, nextTick, onMounted, reactive, toRefs} from 'vue'
const { proxy } = getCurrentInstance()
const props = defineProps(
    {
      paramsInfo: {
        type: String
      },
      resId: {
        type: String
      }
    }
)
const data = reactive({
  mb_MinHeight : 700,
  mb_HeightOffset: 200,
  iframeUrl: ''
});
const { mb_MinHeight, mb_HeightOffset, iframeUrl } = toRefs(data);

function init()
{
  proxy.getConfigKey("sys.smartbi.url").then(response => {
    if (props.paramsInfo)
    {
      let paramsInfoBase64 = encodeURIComponent(Base64.encode(props.paramsInfo));
      mb_HeightOffset.value = 300;
      iframeUrl.value = response.msg + '&hiddenParamPanel=true&resid=' + props.resId + '&paramsInfoBase64=' + paramsInfoBase64;
    }
    else
    {
      iframeUrl.value = response.msg + '&resid=' + props.resId;
      mb_HeightOffset.value = 200;
    }
  })

}
function initIframeHeight() {
  let oIframe = proxy.$refs.myIframe;
  try {
    oIframe.style.height = document.documentElement.clientHeight - mb_HeightOffset.value + 'px';
  } catch (e) {
    console.error("窗口大小变化时，iframe高度自适应异常！" + e);
    oIframe.style.height = mb_HeightOffset.value + 'px';
  }
}
function adaptIframeHeight() {
  let oIframe = proxy.$refs.myIframe;
  oIframe.onload = () => {
    try { // iframe高度自适应
      oIframe.style.height = document.documentElement.clientHeight - mb_HeightOffset.value + 'px';
    } catch (e) {
      console.error("iframe高度自适应异常！" + e);
      oIframe.style.height = mb_HeightOffset.value + 'px';
    }
  };
}
onMounted(() => {
  initIframeHeight();
  adaptIframeHeight();
  window.onresize = () => {
    let oIframe = proxy.$refs.myIframe;//document.getElementById('bdIframe');
    console.log(mb_HeightOffset.value)
    try {
      oIframe.style.height = document.documentElement.clientHeight - mb_HeightOffset.value + 'px';
    } catch (e) {
      console.error("窗口大小变化时，iframe高度自适应异常！" + e);
      oIframe.style.height = mb_MinHeight;
    }
  };
  try {
    const erd = elementResizeDetectorMaker();
    let sidebarWidth = null;
    // 监听左侧导航栏的宽度变化
    erd.listenTo(document.getElementsByClassName("sidebar-container"), (element) => {
      sidebarWidth = element.offsetWidth;
      nextTick(() => {
        let addHeight = 210;
        // 导航栏收缩最小的时候，加大iframe的高度
        if (sidebarWidth === 54) {
          let oIframe = proxy.$refs.myIframe;
          if (undefined !== oIframe) {
            let oldHeight = oIframe.style.height;
            if (undefined !== oldHeight && oldHeight !== '100%') {
              oIframe.style.height = (Number(oldHeight.replace("px", ""))) + addHeight + 'px';
            }
          }
        }
        // 导航栏伸展到最大时，减少iframe的高度
        if (sidebarWidth === 210) {
          let oIframe = proxy.$refs.myIframe;
          if (undefined !== oIframe) {
            let oldHeight = oIframe.style.height;
            if (undefined !== oldHeight && oldHeight !== '100%') {
              oIframe.style.height = (Number(oldHeight.replace("px", ""))) - addHeight + 'px';
            }
          }
        }
      })
    })
  } catch (e) {
    console.error("监听左侧导航栏宽度变化异常！" + e);
  }
})
init()
</script>
